<!--围栏地图页-->
<template>
  <div style="height: 6vh;background-color:#fff;padding:10px 20px;">
    <span style="line-height:60px;font-size:20px;" >新增围栏</span>
    <el-button type="primary" style="float:right;margin-top:13px;"
               @click="router.push('/geofence')">返回</el-button>
  </div>
  <!-- 第6步:创建地图容器元素 -->
  <div id="mapContainer" style="width: 100%; height:84vh;"></div>

  <el-dialog title="围栏信息" v-model="dialogVisible">
    <el-form label-width="80px">
      <el-form-item label="围栏名称">
        <el-input placeholder="请输入围栏信息" v-model="geofence.name"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="closeDialog">取消</el-button>
      <el-button type="primary" @click="saveGeofence" >确定</el-button>
    </template>

  </el-dialog>
</template>

<script setup>
import router from "@/router";
import {nextTick, onMounted, ref} from "vue";
import { DrawScene, DrawControl ,OperateEventType} from 'bmap-draw';
import {ElMessage} from "element-plus";

const dialogVisible = ref(false);

//新增弹窗方法
const saveGeofence = ()=>{
  if (!geofence.value.name || geofence.value.name.trim().length===0){
    ElMessage.error('请输入围栏名称!');
  } else {

    //保存后清空表单
    geofence.value={
      name:'',
      status:'',
      position:{}
    };

  }

}
//关闭弹窗方法
const closeDialog = ()=>{
  if (confirm('确认关闭吗？')){
    dialogVisible.value=false;
    geofence.value.name='';
    //清楚遮盖物
    map.clearOverlays();
  }
};


//8.定义电子围栏对象
const geofence = ref({
  name:'',
  status:'',
  position:{}
});
var map ;
onMounted(()=>{
  //要先创建div再生成地图
  nextTick(()=>{
    //不要导入，使用js原生的，设置存储地图使用的div
   map = new BMapGL.Map("mapContainer");
    //设置地图初始中心点坐标
    let point = new BMapGL.Point(116.4074, 39.9024);
    //设置地图中心点,与缩放级别
    map.centerAndZoom(point,15);
    // 添加鼠标绘制控件
    //1.创建绘制场景类，鼠标绘制的基类，drawScene需要导入
    const scene = new DrawScene(map);
    //2.创建并配置绘制控件类，参数为，绘制场景基类，绘制控件配置项
    const drawContrl = new DrawControl(scene, {
      //不显示提示
      enableTips: false,
      //控件相对显示位置
      anchor: BMAP_ANCHOR_TOP_RIGHT,
      //设置具体绘制项
      drawingItems: [
        'circle',
        'rectangle'
      ]
    });
    //4.添加监听事件，当绘制完成点击√后时触发
    scene.addEventListener(OperateEventType.COMPLETE,(event)=>{
      dialogVisible.value=true;
      console.log(event.target);
      //7.获取触发完成后的覆盖物对象
      let overlay = event.target.overlay;
      //6判断是否为圆形还是矩形
      if (overlay instanceof BMapGL.Circle){
        //设置为圆形
          geofence.value.position.type='circle';
          //存入半径值
          geofence.value.position.radius=overlay.getRadius();
          //保存经度
          geofence.value.position.longitude=overlay.getCenter().lng;
          //保存维度
          geofence.value.position.latitude=overlay.getCenter().lat;
        console.log(geofence.value.position);
      }else{//是矩形
        //定义一个数组用来保存矩形围栏的四个顶点
        let recPoints = [];
        //依次获取覆盖物的四个顶点坐标值
        for(let i = 0; i < 4 ; i++){
          recPoints.push(overlay.points[i].latLng.lng+'-'+overlay.points[i].latLng.lat);
        }
        //设置围栏类型为矩形
        geofence.value.position.type = 'rectangle';
        geofence.value.position.recPoints = recPoints.join(',');
        console.log(geofence.value);
        console.log(geofence.value.position);
      }
    });
    //3.加载绘制控件
    map.addControl(drawContrl);

  })
})







</script>

<style scoped>

</style>